<style lang="less">
	.fullHide {
		position: absolute;
		top: 0;
	}
</style>
<template>
	<view class="cu-custom" :style="{height: CustomBar +'px'}" :class="{fullHide:fullHide}">
		<view class="cu-bar fixed" :class="[{bgImage: 'none-bg text-white bg-img'}, bgColor]"
		      v-bind:style="{height:CustomBar +'px', paddingTop:StatusBar +'px', 'background':colorStr, color: fontColor}">
			<view class="action" @tap="BackPage" v-if="isBack">
				<text class="cuIcon-back"></text>
				<slot name="backText"></slot>
			</view>
			<view class="action border-custom"  v-if="isCustom" :style="{ width:Custom.width + 'px', height: Custom.height +'px', marginLeft:'calc(750rpx - ' + Custom.right +'px)' }">
				<text class="cuIcon-back" @tap="BackPage"></text>
				<text class="cuIcon-homefill" @tap="toHome"></text>
			</view>
			<view class="content" :style="{top: StatusBar + 'px'}">
				<slot name="content"></slot>
			</view>
			<slot name="right"></slot>
		</view>
	</view>
</template>
<script type="text/javascript">
	/**顶部的导航条
	 * Created by PhpStorm.
	 * User:  iyahe@qq.com (天明)
	 * Date: 2020/1/2 0002
	 * Time: 上午 11:35
	 * Description:
	 */
	export default {
		props: {
			bgColor: {
				type: String,
				default: 'bg-default-color'
			},
			isCustom: {
				type: [Boolean, String],
				default: false
			},
			isBack: {
				type: [Boolean, String],
				default: false
			},
			bgImage: {
				type: String,
				default: ''
			},
			colorStr: {
				type: String,
				default: 'not specified'
			},
			fontColor:{
				type: String,
				default: '#fff'
			},
			fullHide: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				StatusBar: null,
				CustomBar: 45,
				Custom: {
					bottom: 58,
					height: 32,
					left: 317,
					right: 404,
					top: 26,
					width: 87,
				},
				styleBar: null,
				actStyle: null
			}
		},
		methods: {
			info () {
				wx.getSystemInfo({
					success: e => {
						this.StatusBar = e.statusBarHeight;
						// #ifndef H5
						let capsule = wx.getMenuButtonBoundingClientRect();
						if (capsule) {
							this.Custom = capsule;
							this.CustomBar = capsule.bottom + capsule.top - e.statusBarHeight;
						} else {
							this.CustomBar = e.statusBarHeight + 50;
						}
						// #endif
						this.setInfo();
					}
				})
			},
			setInfo () {
				this.styleBar =  {
					height: this.CustomBar +'px',
					paddingTop: this.StatusBar +'px',
				};
				this.actStyle = [{
					width: this.Custom.width + 'px',
					height: this.Custom.height +'px',
					marginLeft : 'calc(750rpx - ' + this.Custom.right +'px)'
				}];
			},
			BackPage () {
				this.$wxapi.goBack();
			},
			toHome () {
				this.$wxapi.goNext('index/index', 3);
			}
		},
		created() {
			this.info()
		}
	}
</script>
